<template>
  <div style="margin-top: 30px;">

    <div class="" style="float:left;height: 60px;line-height: 40px;">
      订单类型
      <el-select v-model="typeValue" placeholder="全部">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;创建时间
      <el-date-picker
        v-model="timeValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-input placeholder="输入订单编号/患者姓名" v-model="searchValue" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="querySubmit"></el-button>
      </el-input>
    </div>

    <div class="text item" style="padding:0 -20px;">
      <el-table stripe :data="tableData" :header-cell-style="{lineHeight:'20px'}" style=""><!--height="840"-->
        <el-table-column prop="prop0" label="序号"></el-table-column>
        <el-table-column prop="prop1" label="订单编号"></el-table-column>
        <el-table-column prop="prop2" label="订单类型"></el-table-column>
        <el-table-column prop="prop3" label="姓名"></el-table-column>
        <el-table-column prop="prop4" label="性别"></el-table-column>
        <el-table-column prop="prop5" label="年龄"></el-table-column> <!--width="120"-->
        <el-table-column prop="prop6" label="手机号码"></el-table-column>
        <el-table-column prop="prop7" label="科室"></el-table-column>
        <el-table-column prop="prop8" label="接诊医生"></el-table-column>
        <el-table-column prop="prop9" label="创建时间"></el-table-column>
        <el-table-column prop="prop10" label="应收金额（元）"></el-table-column>
        <el-table-column prop="prop11" label="实收金额（元）"></el-table-column>
        <el-table-column prop="prop12" label="支付方式"></el-table-column>
        <el-table-column prop="prop13" label="收费状态"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="returnClick(scope.row)">退费</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>

    <!--分页--><!--this.params.page this.params.size this.total-->
    <div class="block" style="margin-top:20px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="this.params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total" background>
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      const item = {
        prop0: 1,
        prop1: '201912090030',
        prop2: '处方开立',
        prop3: '王小虎',
        prop4: '男',
        prop5: 20,
        prop6: '15809290122',
        prop7: '全科',
        prop8: '王冕',
        prop9: '2019-11-12 12:08:12',
        prop10: '10.25',
        prop11: '10.25',
        prop12: '支付宝',
        prop13: '已收费'
      };
      return {
        tableData: Array(7).fill(item),

        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '药品零售'
        }, {
          value: '选项3',
          label: '处方开立'
        }],
        typeValue: '',
        //时间
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
        timeValue: '',
        searchValue: '',
        // 分页
        total: 10,
        params: {
          size: 5,
          page: 1,
        }
      }
    },
    methods: {
      querySubmit() {
        console.log('submit!');
      },
      //收费
      chargeClick(row) {
        console.log(row);
      },
      editClick(row) {
        console.log(row);
      },
      deleteClick(row) {
        console.log(row);
      },
      //分页使用方法
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.size = val;
       /* this.tableData=Array(50).fill(item);
        this.total=50;*/
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        /*this.tableData=Array(50).fill(item);
        this.total=50;
        alert("CurrentChange="+val+"----------"+this.total);*/
      }
    },
    mounted() {
    }
  };
</script>

<style scoped>
  /*布局容器的样式*/

  /*卡片的样式*/
  .text {
    /*font-size: 14px;*/
  }

  .item {
    /*margin-bottom: 18px;*/
  }

  .box-card {
    /*width: 1500px;*/
  }

  .el-table .el-table-column {
    height: 30px;
  }

  /*查询框*/
  .el-input {
    width: 360px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
